@use "../../styles/variables";

.progress-bar {
  width: 100%;
  box-sizing: border-box;
  border-radius: variables.$progress-border-radius;
  background-color: variables.$progress-bg;
  .progress-bar-outer{
    overflow: hidden;
    position: relative;
  }
  .progress-bar-inner {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    border-radius: variables.$progress-border-radius;
    line-height: 1;
    transition: variables.$progress-bar-transition;
    .inner-text {
      color: variables.$progress-bar-color;
      font-size: variables.$progress-font-size;
      margin: 0 5px;
    }
  }
  @each $key, $val in (
    primary: variables.$primary,
    secondary: variables.$secondary,
    success: variables.$success,
    info: variables.$info,
    warning: variables.$warning,
    danger: variables.$danger,
    light: variables.$light,
    dark: variables.$dark
  ) {
    .color-#{$key} {
      background-color: $val;
    }
  }
}
